<template>
    <div class="marLR20">
        <div class="marB20">
            <div style="display:inline-block;" class="marT10">
                <el-select v-model="templateType" placeholder="请选择模板类型" class="inputTxtWrapper">
                    <el-option :value = 0 label = "全部模板"></el-option>
                    <el-option :value = 1 label = "实习期合同模板"></el-option>
                    <el-option :value = 2 label = "试用期合同模板"></el-option>
                    <el-option :value = 3 label = "正式合同模板"></el-option>
                    <el-option :value = 4 label = "退休返职合同模板"></el-option>
                    <el-option :value = 5 label = "钟点工合同模板"></el-option>
                </el-select>
                 <el-select v-model="isUsing" placeholder="请选择状态" class="inputTxtWrapper marR5">
                    <el-option :value = 0 label = "所有状态"></el-option>
                    <el-option :value = 1 label = "禁用"></el-option>
                    <el-option :value = 2 label = "正在使用中"></el-option>
                 </el-select>
            </div>
            <button class="operatBtn marR5 marT10" @click.stop="handleChange">搜索</button>
        </div>

        <!-- 合同模板表格 -->
        <div class="marT10">
            <el-table
                :data="contractTemplList"
                border
                style="width: 100%">
                <el-table-column
                align="center"
                prop="template_name"
                label="模板名字">
                </el-table-column>
                <el-table-column
                align="center"
                label="模板类型">
                    <template slot-scope="scope">
                        <template v-if="scope.row.template_type === 1">实习期合同</template>
                        <template v-else-if="scope.row.template_type === 2">试用期合同</template>
                        <template v-else-if="scope.row.template_type === 3">正式合同(含首签合同,续签合同,无固定期限合同)</template>
                        <template v-else-if="scope.row.template_type === 4">退休返职合同</template>
                        <template v-else-if="scope.row.template_type === 5">钟点工合同</template>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                label="模板制作人">
                    <template slot-scope="scope">
                        {{scope.row.user_name}}({{scope.row.staffnum}})
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                prop="add_time"
                label="新增时间">
                </el-table-column>
                <el-table-column
                align="center"
                label="模板状态">
                    <template slot-scope="scope">
                        <template v-if="scope.row.is_using === 1">禁用</template>
                        <template v-else-if="scope.row.is_using === 2">正在使用中</template>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                label="操作">
                    <template slot-scope="scope">
                        <span title="下载模板" class="marR15"><icon name="download" class="scaleIcon1 svgColor" @click.native.stop="downLoadContractTempl(scope.row.web_path)" style="cursor:pointer;"></icon></span>
                        <span :title="scope.row.is_using === 1 ? '启用模板' : '禁用模板'"><icon name="enable" class="scaleIcon1" :class="scope.row.is_using === 1 ? 'lightGrayColor' : 'svgColor'" @click.native.stop="enableContractTemplate(scope.row.id,scope.row.is_using,scope.$index,scope.row.template_type)" style="cursor:pointer;"></icon></span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>

import http from '@/assets/js/http'
import _g from '@/assets/js/global'

export default {
    data(){
        return {
            contractTemplList : [],
            templateType : 0,// 合同模板类型
            isUsing : 0,//  合同模板状态
        }
    },
    created () {
        this.getAllContractTemplate()
    },
    methods: {
        /* 启用 / 禁用合同模板 */
        enableContractTemplate(contractTemplateId,isUsing,index,templateType){
            const that = this
            isUsing = isUsing === 1 ? 2 : 1
            const str = isUsing === 1 ? '是否确认禁用模板' : '是否确认启用模板'
            let isEnabled = false// 默认没有其它同类型模板被启用
            isEnabled = that.contractTemplList.some(item => item.id !== contractTemplateId && item.template_type === templateType && item.is_using === 2)
            if(isEnabled){
                _g.toastMsg("warning", '同类型模板只能有一个处于使用中...')
                return
            }

            that.$confirm(str, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                _g.showLoading('提交中')
                that.apiPost('/admin/contractTempl/enableContractTemplate',{contractTemplateId,isUsing}).then((res) => {
                _g.showLoading().close()
                if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){
                            _g.toastMsg("success", res.message)
                            that.contractTemplList[index].is_using = isUsing
                        }else if(res.data.isSuccess === 1){
                            _g.toastMsg("error", res.message)
                        }else if(res.data.isSuccess === 2){
                            _g.toastMsg("warning", res.message)
                        }
                    }
                })
            }).catch(() => {})
        },
        /* 下载合同模板 */
        downLoadContractTempl(filePath) {
            // window.open(filePath)
            location.href = filePath
        },
        /* 按条件搜索 */
        handleChange(){
            this.getAllContractTemplate()
        },
        /* 查询合同模板 */
        getAllContractTemplate(){
            const that = this
            const templateType = that.templateType
            const isUsing = that.isUsing

            _g.showLoading('提交中')
            that.apiPost('/admin/contractTempl/getAllContractTemplate',{templateType,isUsing}).then((res) => {
            _g.showLoading().close()
            if(typeof res === 'string'){
                    res = JSON.parse(res)
                }
                if (res.code != 200) {
                    that.handleError(res)
                } else {
                    if(res.data.isSuccess === 0){
                        // _g.toastMsg("success", res.message)
                        that.contractTemplList = res.data.contractTemplList
                    }else if(res.data.isSuccess === 1){
                        _g.toastMsg("error", res.message)
                    }
                }
            })
        }
    },
    mixins: [http]
}
</script>